<template>
  <div
    class="d-flex-c jc-c ai-c"
  >
    <!-- <div
      class="flex-ai-c center-type-box"
    >
      <div
        v-for="(item,index) in typeList"
        :key="index"
        :class="item.class"
        class="center-type-item"
      >
        <span class="center-type-text">
          {{ item.label }}
        </span>
      </div>
    </div> -->
    <span class="time-text">
      {{ time }}
    </span>
    <div class="f-20 title-text">
      全省降雨实况图
    </div>
    <div class="divider-line" />
  </div>
</template>
<script>
export default {
  name: 'YsqxxCenterInfo',
  data () {
    return {
      time: '3月05日 08时 - 3月06日 10时',
      typeList: [
        // {
        //   label: '气象云图',
        //   class: 'cloud'
        // },
        {
          label: '降雨分布',
          class: 'rain'
        }, {
          label: '河道水情',
          class: 'river'
        }, {
          label: '水库水情',
          class: 'reservoir'

        }
      ]
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.time-text {
  font-size: 18px;
  color: #dbeffd;
  line-height: 18px;
  margin-bottom: 8px;
}

.title-text {
  font-size: 20px;
  font-weight: 700;
  color: #dbeffd;
  line-height: 20px;
}

.divider-line {
  background: url("~@/assets/images/ysqxx/center-line.png") no-repeat left top;
  background-size: 100% 100%;
  width: 516px;
  height: 31px;
  opacity: 0.64;
}
</style>
